<template>
	<view>
		<view class="gaps"></view>
		<uni-card :isFull="true">
			<uni-forms ref="form" :rules="rules"  v-model="formData">
				<uni-forms-item label="名称" required name="name">
					<uni-easyinput placeholder="请输入奖品名" v-model="formData.name" />
				</uni-forms-item>
				<uni-forms-item label="库存" name="stock" required>
					<uni-easyinput v-model="formData.stock" />
				</uni-forms-item>
				<uni-forms-item>
					<uni-file-picker ref="file" title="奖品图片" limit="1" file-mediatype="image" mode="grid" @select="selectImage"
						@delete="delImage" :value="prizeUrl"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="权重" required name="weight">
					<uni-easyinput v-model="formData.weight" />
				</uni-forms-item>
				<uni-forms-item label="有效期(小时)" required name="expirationDate">
					<uni-easyinput placeholder="请输有效期" v-model="formData.expirationDate" type="number" />
				</uni-forms-item>
				<uni-forms-item label="奖品说明" name="intro">
					<uni-easyinput type="textarea" autoHeight v-model="formData.intro" />
				</uni-forms-item>
				
			</uni-forms>
		</uni-card>
		<view class="tips">
			<view>*库存设置为-1，表示无限制</view>
			<view>*权重会影响中奖率，数值越大，中奖率越高</view>
			<view>*奖品说明内容请以‘*’分隔</view>
		</view>
		<view class="bottom-fiex-area">
			<button size="mini" type="primary" @click="addGoodsForm">保存</button>
		</view>

	</view>
</template>

<script>
	import {
		addPrize,
		getPrizeById,
		editPrize
	} from '@/api/shops/prizeManage/prizeManage.js'
	
	import uploadFile from '@/utils/uploadFile.js'
	export default {
		data() {
			return {
				selImage: '',
				shopId:'',
				prizeId:'',
				
				eventChannel: undefined,
				formData: {
					name:'',
					stock:'',
					imageUrl:'',
					weight:'',
					intro:'',
					times: 1,
					type:1,
					expirationDate:0
				},
				prizeUrl:{},
				rules: {
					name: {
						rules: [
							{
								required: true,
								errorMessage: '请填写商品名',
							},
						],
					},
					stock: {
						rules: [{
							required: true,
							errorMessage: '请填写库存',
						}, {
							format: 'number',
							errorMessage: '库存只能输入数字'
						}]
					},
					weight:{
						rules: [{
							required: true,
							errorMessage: '请填写权重',
						}, {
							format: 'number',
							errorMessage: '权重只能输入数字'
						}]
					}
				}
			}
		},
		onLoad: function(option) {
			this.eventChannel = this.getOpenerEventChannel();
			this.shopId = option.shopId
			this.prizeTimes = option.times
			this.formData.times = option.times,
			this.prizeId = option.id
			this.init()
			
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			init() {
				if(this.prizeId) {
					getPrizeById(this.prizeId).then(res => {
						this.formData = res;
						this.prizeUrl = {
							"name": res.imageUrl.slice(res.imageUrl.lastIndexOf('/') + 1),
							"extname": res.imageUrl.slice(res.imageUrl.lastIndexOf('.') + 1),
							"url": res.imageUrl,
							"up": false
						}
					})
				}
			},
			
			async addGoodsForm(form) {
				if(!this.prizeUrl) {
					return uni.showToast({
						icon:'none',
						title:'请选择图片'
					})
				}
				let _this = this;
				this.$refs.form.validate().then(async (res) => {
					uni.showLoading({
						title: '正在上传图片'
					})
					if(this.prizeUrl.up) {
						const file = await uploadFile(this.prizeUrl.url, `shops/${this.shopId}/prize/`)
						this.formData.imageUrl = file.fileUrl
					}
					uni.hideLoading()
					uni.showLoading({
						title: '正在保存信息'
					})
					if(this.prizeId) {
						editPrize(this.formData).then((res) => {
							this.eventChannel.emit('editChange', {data:  this.formData})
							uni.showModal({
								title:'修改成功',
								showCancel:false,
								success: (r) => {
									if(r.confirm) {
										uni.navigateBack()
									}
								}
							})
						})
						return
					}
					
					addPrize(this.formData).then((res) => {
						this.eventChannel.emit('prizeListChange', {
							data: {
								times:this.prizeTimes
							}
						})
						uni.showModal({
							title:'保存成功',
							content:'是否继续添加',
							cancelText:'返回',
							success: (r) => {
								if(r.cancel) {
									uni.navigateBack()
								} else {
									_this.formData.name = ''
									_this.formData.stock = ''
									_this.formData.imageUrl = ''
									_this.formData.weight = ''
									_this.formData.intro = ''
									_this.prizeUrl = ''
									_this.$refs.file.clearFiles()
								}
							}
						})
					}).finally(() => {
						uni.hideLoading()
					})
				}).catch((e) => {
					uni.showModal({
						title: '数据填写不完整'
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			selectImage(res) {
				const {
					name,
					extname,
					url
				} = res.tempFiles[0]
				this.prizeUrl = {
					name,
					extname,
					url,
					"up": true
				};// res.tempFilePaths[0];
				
				// const {
				// 	name,
				// 	extname,
				// 	url
				// } = e.tempFiles[0]
				// this.selImage.push({
				// 	name,
				// 	extname,
				// 	url,
				// 	"up": true
				// })
				
			},
			delImage(res) {
				this.prizeUrl = ''
			}
		}
	}
</script>

<style lang="scss">
	.bottom-fiex-area {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cate-sel {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		font-size: 13px;
		color: #999999;
	}

	.tips {
		padding: 10px;
		color: #999;
		font-size: 12px;
	}

	.scroll-Y {
		height: 500rpx;
		white-space: nowrap;
		width: 100%;
	}
</style>